import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class IconPage extends StatefulWidget {
  const IconPage({Key? key}) : super(key: key);

  @override
  State<IconPage> createState() => _IconPageState();
}

class _IconPageState extends State<IconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Icon"),
      ),
      body: Container(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 20),
        child: childBody(),
      ),
    );
  }

  childBody() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(vertical: 16),
          child: TextView.text("箭头"),
        ),
        Row(
          children: [
            Image.asset('assets/icon_left.png', width: 16, height: 16),
            const SizedBox(width: 16),
            Image.asset('assets/icon_up.png', width: 16, height: 16),
            const SizedBox(width: 16),
            Image.asset('assets/icon_down.png', width: 16, height: 16),
            const SizedBox(width: 16),
            Image.asset('assets/icon_right.png', width: 16, height: 16),
            const SizedBox(width: 16),
          ],
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 16),
          child: TextView.text("通用"),
        ),
        Container(
          color: Colors.black87,
          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 16),
          child: Row(
            children: [
              Image.asset('assets/icon_clone.png', width: 16, height: 16),
              const SizedBox(width: 16),
              Image.asset('assets/icon_right_w.png', width: 16, height: 16),
              const SizedBox(width: 16),
              // Image.asset('assets/icon_left_w.png', width: 16, height: 16),
              const SizedBox(width: 16),
              Image.asset('assets/icon_img1.png', width: 16, height: 16),
              const SizedBox(width: 16),
              Image.asset('assets/icon_img2.png', width: 16, height: 16),
              const SizedBox(width: 16),
              Image.asset('assets/icon_img3.png', width: 16, height: 16),
              const SizedBox(width: 16),
              Image.asset('assets/icon_img4.png', width: 16, height: 16),
              const SizedBox(width: 16),
              Image.asset('assets/icon_img5.png', width: 16, height: 16),
              const SizedBox(width: 16),
            ],
          ),
        )
      ],
    );
  }
}
